<script setup lang="ts">
import { ref, computed } from 'vue';
import type { Ref, ComputedRef } from 'vue'
import { useRouter } from 'vue-router'
import { useCascaderAreaData } from '@vant/area-data'
import { showToast, showConfirmDialog } from 'vant';

const router = useRouter()
const name: Ref<string> = ref('')
const tel: Ref<string> = ref('')
const password: Ref<string> = ref('')
const id: Ref<string> = ref('')
const yzm: Ref<string> = ref('')

const fieldValue1: Ref<string> = ref('')
const fieldValue2: Ref<string> = ref('')
const fieldValue3: Ref<string> = ref('')
const showPicker: Ref<boolean> = ref(false)
const showPicker3: Ref<boolean> = ref(false)
const cascaderValue: Ref<string> = ref('')

// 性别选择
const sex: {
  text: string;
  value: string;
}[] = [
    { text: '男', value: 'man' },
    { text: '女', value: 'woman' },
  ];

function onConfirm({ selectedOptions }) {
  showPicker.value = false;
  fieldValue1.value = selectedOptions.map((sex) => sex.text)
  return {
    sex,
    onConfirm,
    fieldValue1,
    showPicker,
  }
}

// 地址选择
const show: Ref<boolean> = ref(false);
const fieldValue: Ref<string> = ref('');
// const cascaderValue: Ref<string> = ref('');
const options = useCascaderAreaData();
function onFinish({ selectedOptions }) {
  show.value = false;
  fieldValue2.value = selectedOptions.map((option) => option.text).join('/');

  return {
    show,
    options,
    onFinish,
    fieldValue2,
    cascaderValue,
  }
}

// 职业选择
const job: {
  text: string;
  value: string;
}[] = [
    { text: '党的机关、国家机关、群众团体和社会组织、企事业单位负责人', value: '1' },
    { text: '专业技术人员', value: '2' },
    { text: '办事人员和有关人员', value: '3' },
    { text: '社会生产服务和生活服务人员', value: '4' },
    { text: '农、林、牧、渔业生产及辅助人员', value: '5' },
    { text: '生产、运输设备操作人员及有关人员', value: '6' },
    { text: '军人', value: '7' },
    { text: '不便分类的其他从业人员', value: '8' },
  ]

function onConfirm2({ selectedOptions }) {
  showPicker3.value = false;
  fieldValue3.value = selectedOptions.map((job) => job.text)
  return {
    job,
    onConfirm2,
    fieldValue3,
    showPicker3,
  }
}
// 验证手机号是否合法，当输入的是合法手机号，就可以点击下一步
let flag: ComputedRef<boolean> = computed(() => {
  if (/^(?:(?:\+|00)86)?1\d{10}$/.test(tel.value) && password.value.length != 0 && name.value.length != 0 && id.value.length == 18 && yzm.value.length >= 6) {
    return false
  } else {
    return true
  }
})

// 提交按钮的点击事件
function btnClick() {
  showToast('恭喜您注册成功！')
  router.push('/login')
}

// 点击发送验证码
let time: Ref<number> = ref(10)
let timer: Ref<any> = ref(null)
let text: Ref<string> = ref('发送验证码')
function sendCode() {
  timer.value = setInterval(() => {
    text.value = '重新获取(' + time.value + 's)'
    time.value--
    if (time.value == -1) {
      // 关闭定时器
      clearInterval(timer.value)
      // 将按钮设置为发送验证码
      time.value = 10
      text.value = '发送验证码'
    }
  }, 1000)
}


</script>

<template>
  <div class="register">
    <van-nav-bar style="background-color: white;" title="注册">
      <template #left>
        <p @click="$router.back()"><van-icon color="gray" name="arrow-left" /><span class="back">返回</span> </p>
      </template>
    </van-nav-bar>
    <van-cell-group inset>
      <van-field v-model="name" label="姓名" clearable placeholder="请输入姓名" />
      <van-field v-model="tel" label="手机号" clearable placeholder="请输入手机号" />

      <van-field v-model="yzm" label="验证码" clearable placeholder="请输入验证码">
        <template #button>
          <van-button size="mini" :disabled="time < 10" @click="sendCode" style="color: blue;width: 70px;">{{ text
          }}</van-button>
        </template>
      </van-field>

      <van-field v-model="password" label="密码" placeholder="请设置密码" />

      <van-field v-model="fieldValue1" is-link readonly label="性别" placeholder="选择性别" @click="showPicker = true" />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="sex" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>

      <van-field v-model="id" label="身份证" clearable placeholder="请输入身份证，成为房东时有用" />

      <van-field is-link readonly label="地址" v-model="fieldValue2" placeholder="请选择地址" @click="show = true" />
      <van-popup v-model:show="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
          @finish="onFinish" />
      </van-popup>

      <van-field v-model="fieldValue3" is-link readonly label="行业" placeholder="请选择您的职业" @click="showPicker3 = true" />
      <van-popup v-model:show="showPicker3" round position="bottom">
        <van-picker :columns="job" @cancel="showPicker3 = false" @confirm="onConfirm2" />
      </van-popup>
    </van-cell-group>
    <van-button square type="primary" :disabled="flag" size="normal" @click=btnClick>提交</van-button>

  </div>
</template>
<style lang="scss" scoped>
.register {
  height: 100%;
  background-color: #f5f5f5;
}

.van-field {
  border-bottom: 1px solid gray;
  font-size: 15px;
}

.van-cell-group {
  margin-top: 20px;
}

.van-button {
  width: 90%;
  margin-left: 5%;
  margin-top: 50px;
}

.back {
  color: blue;
}
</style>